{% extends "main.html" %}
{% block logourl %} "/fbmain" {% endblock %} 
{% block head %}
<link type="text/css" rel="stylesheet" href="static/fb.css">
{% endblock %}
{% block search %}
<div id="searchdiv" class="searchdiv">
      <form action="/search" method="get">
      <input autocomplete="off" name="q" id="q" type="text" tabindex="1" value="{{query}}"/>
      <script type="text/javascript">
          function showTopics(){
             document.getElementById('topics').style.visibility='visible';
            document.getElementById('random-topics').style.display='none';
        }
          $(document).ready(function() {
        $("#q").autocomplete(
            [             {%for keyw in allkeywords%}
                    '{{keyw}}',
             {%endfor%}''],
            {
                delay:1,
                minChars:1,
                matchSubset:1,
                autoFill:true,
                maxItemsToShow:10,
                multiple:true,
                multipleSeparator: " "
            }
        );
    });




      </script>
      <input type="submit" value="Search" />
      </form>
      <span class="hottopics">
        <span id="random-topics" class="keywords">
        Hot topics:
            {%for keyw in hotkeywords|slice:"3"%}
                    <a href="?q={{keyw}}">{{keyw}}</a>
             {%endfor%}
             <a href="#" onclick="showTopics();">more...</a>
             <br>

        </span>

        <span id="topics" style="visibility:hidden" class="keywords">
             {%for keyw in hotkeywords|slice:"20"%}
                    <a href="?q={{keyw}}">{{keyw}}</a>
             {%endfor%}
        </span>
       </span>
    </div>
{% endblock %}


{% block user %}
<span class="menulinks">
	     	<a href="?commented=true"><img src="/static/icommented50.png" style="height: 15px; width: 15px;" title="Commented articles">My Comments</a><br>              
	     	<a href="?starred=true"><img src="/static/full-star.gif" style="height: 15px; width: 15px;" title="Favourite articles">Favorites</a>     	
</span>
{% endblock %}

{% block content %}
    <div id="content" class="content">

        <center><h4>If you're new to iLike-IL it is recommended you <a href="http://israel-like.appspot.com">go to our site</a> and view the explanation slides.</h4></center>

    {% for article in articles %}
	<div class="articlebox">
        <a target="_blank" href="article?key={{article.key}}{%if user_min%}&min=m{%endif%}" title="{{article.title}}" style="float: left; ">
                 
        <img
		{% if article.pic_url %}
		src="{{article.pic_url}}" 
		{% else %}
		src="/static/logo80.jpg" 
		{% endif %}
        
		class="thumb" alt="" />        

		</a>
        <div class="articlebox-text">            
            {% if article.latest_activity.commented %}
            <img title="I commented on this article" style="height:15px;width:15px" src="/static/icommented50.png" ></img>
            {% endif %}
            {% if article.latest_activity.starred %}
            <img title="Favourite article" style="height:15px;width:15px" src="/static/full-star.gif" ></img>
            {% endif %}            
            {% if article.latest_activity.inc %}
            <img title="Marked relevant" style="height:15px;width:15px" src="/static/like.gif" ></img>
            {% endif %}
            {% if article.latest_activity.dec %}
            <img title="Marked relevant" style="height:15px;width:15px" src="/static/dislike.gif" ></img>
            {% endif %}
            <b style="margin-bottom: 5px; height: 30px;">
			<a target="_blank" href="article?key={{article.key}}{%if user_min%}&min=m{%endif%}">
            {{article.title}}</a></b>
            <div>{{article.desc|slice:"100"}}...</div>
            <span class="source">by {{article.source}} | {{article.pretty_date}} | <b>views:{{article.usersViewed}}</b> | 
            {% ifequal article.usersCommented 0 %}
            <a style="color:gray" href="article?key={{article.key}}{%if user_min%}&min=m{%endif%}">Be the first to comment!</a>
            {% else %}
              comments:{{article.usersCommented}}
            {% endifequal %}
             </span>
        </div>
    </div>
    {% endfor %}

{% endblock %}

{% block bottom %}
<br>
  <table class="paginator" width="95%" align="center" cellpadding="3" cellspacing="0" style="margin-bottom:5">
  <tbody><tr><td>

        {% if prev_url %}
            <a href="{{prev_url}}" ><div class="prevbutton"></div>Previous</a>
        {% endif %}
		</td><td width="900px"></td><td>  
        {% if hasnextpage %}
            <a href="{{next_url}}" ><div class="nextbutton"></div>Next</a>
        {% endif %}  
        
    </td></tr>
    <table width="400px" align="center" cellpadding="3" cellspacing="0" bgcolor="#C3D9FF" style="margin-bottom:5">
  <tbody><tr>
  <td class="bubble tl" align="left" valign="top"><div class="SPRITE_corner_tl"></div></td>
  <td class="bubble" rowspan="2" style="text-align:left">
  <div align="center">
  <font size="-1" color="#666666">TAU Google Technologies for Cloud Development Workshop 2010
  {% if admin %}
  <a href="admin">Admin</a> -
  {% endif %}
  <a href="about">About</a> -
  <a href="http://code.google.com/p/ilikeil/">Development</a> -
  <a href="support">Support</a>
  </font>
  </div>
  </td>
  <td class="bubble tr" align="right" valign="top"><div class="SPRITE_corner_tr"></div></td>
  </tr>
  <tr>
  <td class="bubble bl" align="left" valign="bottom"><div class="SPRITE_corner_bl"></div></td>
  <td class="bubble br" align="right" valign="bottom"><div class="SPRITE_corner_br"></div></td>
  </tr>
</tbody></table>
    <script type="text/javascript">
  var rpxJsHost = (("https:" == document.location.protocol) ? "https://" : "http://static.");
  document.write(unescape("%3Cscript src='" + rpxJsHost +
"rpxnow.com/js/lib/rpx.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
  RPXNOW.overlay = true;
  RPXNOW.language_preference = 'en';
</script>
</div>
{% endblock %}
</div>